<template>
  <view class="activity_container" :class="index%2===0?'redBg':'blueBg'">
    <view class="title">
      <text>{{ data.title }}</text>
      <image
        :src=" index%2===0 ? staticUrl() +'/new/pintuan_more.png':staticUrl() +'/new/floor_brand_more.png'"
        class="more" @click="clickActivity">
      </image>
    </view>
    <swiper :interval="3000" autoplay circular class="swiper">
      <swiper-item v-for="(ii, jj) in datas" :key="jj" class="swiper-item">
        <view v-for="(item, index) in ii" :key="index" class="data_item" @click="clickActivity">
          <image v-if="item.inform" :src="item.inform" class="img inform_announcement"></image>
          <ImageCache :src="item.original ? item.original : staticUrl() + '/home/defaultImg.png'"
            class="img" :class="item.quantity ? '' : 'sellOut_container-img'" />
          <view class="singleRowEllipsis">
            <text class="ephedrine" v-if="item.ephedrine">含麻</text>
            <text class="goodsName">{{ item.goodsName }}</text>
          </view>
          <view class="promotionPrice" v-if="hasToken() && item.promotionPrice">
            <text>￥</text><text>{{ item.promotionPrice }}</text><text>/{{ item.goodsUnit }}</text>
          </view>
          <view class="originalPrice" v-if="hasToken() && item.originalPrice">
            <text>￥</text><text>{{ item.originalPrice }}</text>
          </view>
          <view class="promotionPrice singleRowEllipsis" v-if="!hasToken()"> 登录可见 </view>
          <view class="promotionPrice singleRowEllipsis" v-if="hasToken() && !item.promotionPrice">
            资质审核可见
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import { getDedicatedBanner, getDedicatedData } from '@/api/home/index'

export default {
  props: {
    data: {
      type: Object,
      default: () => { }
    },
    index: {
      type: Number,
      default: 0,
    },
  },
  data () {
    return {
      datas: [],
    }
  },
  mounted () {
    getDedicatedData(this.data.promotion.promotionGoodsPath + '&pageSize=18').then(res => {
      if (res.code === 200) {
        let goods = res.data.records
        let num = Math.ceil(goods.length / 6)
        for (let i = 0; i < num; i++) {
          this.$set(this.datas, i, goods.slice(i * 6, i * 6 + 6))
        }
      }
    })
  },
  methods: {
    clickActivity () {
      uni.navigateTo({
        url: `/subpackage/activity/activity?promotionType=${this.data.promotion.promotionType}&title=${this.data.promotion.title}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.blueBg {
  background-image: url("https://www.xdyy100.com/wholesale/files/mp/static/new/activity2.png");
}
.redBg {
  background-image: url("https://www.xdyy100.com/wholesale/files/mp/static/new/activity.png");
}

.activity_container {
  background-size: 100%;
  background-repeat: no-repeat;
  width: 702rpx;
  height: 646rpx;
  .title {
    font-weight: bold;
    font-size: 36rpx;
    color: #ffffff;
    padding: 21rpx 24rpx 23rpx 29rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    image {
      width: 104rpx;
      height: 44rpx;
    }
  }
  swiper {
    width: 644rpx;
    height: 538rpx;
    margin: 0 29rpx;
  }
  .swiper-item {
    display: grid;
    grid-template: repeat(2, auto) / repeat(3, 1fr);
    gap: 16rpx;

    .data_item {
      width: 204rpx;
      height: 261rpx;
      background: #ffffff;
      border-radius: 9rpx;
      position: relative;

      .img {
        display: block;
        width: 140rpx;
        height: 112rpx;
        margin: 28rpx 32rpx 0;
      }
      .singleRowEllipsis {
        margin-left: 16rpx;
        .goodsName {
          width: 80%;
          color: #333333;
          font-size: 24rpx;
          line-height: 44rpx;
          font-weight: 550;
        }
      }
      .promotionPrice {
        line-height: 34rpx;
        color: #ef231b;
        font-size: 24rpx;
        margin-left: 16rpx;
        text:nth-child(2) {
          font-size: 32rpx;
          font-weight: bold;
        }
        text:nth-child(3) {
          color: #999999;
          font-size: 20rpx;
          margin-left: 4rpx;
        }
      }
      .originalPrice {
        margin-left: 16rpx;
        font-size: 20rpx;
        color: #999999;
        text-decoration-line: line-through;
        line-height: 1;
      }
    }
  }
}
</style>
